<template>
    <div class="budget-chart">
      <v-chart :option="chartOption" autoresize />
    </div>
  </template>
  
  <script setup>
  import { use } from 'echarts/core'
  import { PieChart } from 'echarts/charts'
  import { CanvasRenderer } from 'echarts/renderers'
  import { TooltipComponent, LegendComponent } from 'echarts/components'
  import VChart from 'vue-echarts'
  
  use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent])
  
  const props = defineProps({
    data: {
      type: Object,
      required: true
    }
  })
  
  const chartOption = computed(() => ({
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: props.data.used, name: '已使用' },
        { value: props.data.remaining, name: '剩余' }
      ],
      itemStyle: {
        borderRadius: 8,
        borderWidth: 2,
        borderColor: '#fff'
      }
    }]
  }))
  </script>
  
  <style scoped>
  .budget-chart {
    height: 300px;
  }
  </style>